const webpack = require('webpack')
const CompressionWebpackPlugin = require('compression-webpack-plugin');
const productionGzipExtensions = ['js', 'css'];

// 判断是否为生产环境/开发环境
const isProduction = process.env.NODE_ENV === 'production';

// cnd加速
// 关闭将index.html引入注释,使用assetsCDN参数地址全部注释
const assetsCDN = {
    // webpack build externals
    externals: {
        'vue': 'Vue',
        'vue-router': 'VueRouter',
        'jquery': 'jQuery',
        'vue-i18n': 'VueI18n',
        'vuex': 'Vuex',
        'echarts': 'echarts',
        'axios': 'axios',
        'crypto': 'Crypto',
    },
    css: [
        'https://cdn.jsdelivr.net/npm/ant-design-vue@1.4.0/dist/antd.css'
    ],
    js: [
        'https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js',
        'https://cdn.bootcss.com/vue/2.6.6/vue.min.js',
        'https://cdn.bootcss.com/vue-i18n/8.9.0/vue-i18n.min.js',
        'https://cdn.bootcss.com/vue-router/3.0.2/vue-router.min.js',
        'https://cdn.bootcss.com/vuex/3.1.0/vuex.min.js',
        'https://cdn.bootcss.com/echarts/4.2.1/echarts.min.js',
        'https://cdn.bootcss.com/axios/0.18.0/axios.min.js'
    ]
}


module.exports = {
    chainWebpack: config => {
        config
            .plugin('webpack-bundle-analyzer')
            .use(require('webpack-bundle-analyzer').BundleAnalyzerPlugin)

        if (isProduction) {
            // 将数据传入index.html界面
            config.plugin('html').tap(args => {
                args[0].cdn = assetsCDN
                return args
            })
        }
    },
    // 基本路径
    publicPath: './',
    // 输出文件目录
    outputDir: 'dist',
    // 设置上线后是否加载webpack文件
    productionSourceMap: false,
    // 静态资源目录(js,css,img,fonts)
    assetsDir: 'assets',
    devServer: {
        port: 80,
        proxy: {
            '/api': {
                target: 'http://52.91.203.209',
                ws: true,
                changeOrigin: true,
                // 替换target中的请求地址，也就是说以后你在请求这个地址的时候直~接写成/api即可
                pathRewrite: { '^/api': '/' }
            }
        }
    },
    transpileDependencies: ['vue-echarts'],
    css: {
        // 配置less
        loaderOptions: {
            less: {
                modifyVars: {
                    'body-background': '#fff',
                    'primary-color': '#1da57a',
                    'form-item-margin-bottom': '14px',
                    'border-radius-base': '2px',
                    // 子菜单展开时title的字体颜色
                    // 'menu-highlight-color': 'transparent'
                    'menu-item-active-bg': 'transparent',
                    // 'input-bg': 'transparent',
                },
                javascriptEnabled: true
            }
        }
    },


    configureWebpack: config => {

        // jquery的安裝
        config.plugins.push(new webpack.ProvidePlugin({
            $: "jquery",
            jQuery: "jquery",
            "windows.jQuery": "jquery"
        })
        )
        //是否生产环境
        if (isProduction) {
            // 是否使用gzip压缩
            config.plugins.push(new CompressionWebpackPlugin({
                algorithm: 'gzip',
                test: new RegExp('\\.(' + productionGzipExtensions.join('|') + ')$'),
                threshold: 10240,
                minRatio: 0.8
            }))

            // 使用cdn打包
            config.externals = assetsCDN.externals

            // 是否展示log打印 true==不显示
            config.optimization.minimizer[0].options.terserOptions.compress.drop_console = true
        } else {
            //开发环境
        }
    }
}
